<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>文档处理</title>
	<style>
		div{
			background: lavenderblush;
			padding: 20px;
		}
		p{
			background: lemonchiffon;
			padding: 20px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script>
		$(function(){
			// append() - 在被选元素的结尾插入内容
			$("#btn1").click(function(){
				$("div").append("<br/>新添加的文本1<br/>");
				$("div").append("<p>新添加的段落1</p>");
			});
			//prepend() - 在被选元素的开头插入内容
			$("#btn2").click(function(){
				$("div").prepend("<br/>新添加的文本2<br/>");
				$("div").prepend("<p>新添加的段落2</p>");
			});
			//after() - 在被选元素之后插入内容
			$("#btn3").click(function(){
				$("div").after("<br/>新添加的文本3<br/>");
				$("div").after("<p>新添加的段落3</p>");
			});
			//before() - 在被选元素之前插入内容
			$("#btn4").click(function(){
				$("div").before("<br/>新添加的文本4<br/>");
				$("div").before("<p>新添加的段落4</p>");
			});
		});
	</script>
</head>
<body>
	<button id="btn1">append</button>
	<button id="btn2">prepend</button>
	<button id="btn3">after</button>
	<button id="btn4">before</button>
	<div>
		div1
	</div>
	<p>p1</p>
</body>
</html>